<template>
  <div class="article-detail-page bg-white">
    <ArticleDetail :title="articleData.title" :content="articleData.content" />

    <!-- 购药渠道 -->
    <BuyDrug :data="articleData.BuyDrugData" v-if="articleData.switchStatus" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useService } from '@/utils/services';
import messager from '@/utils/postMessage';
import ArticleDetail from './components/ArticleDetail';
import BuyDrug from './components/BuyDrug.vue';

export default {
  components: {
    ArticleDetail,
    BuyDrug
  },
  setup() {
    const route = useRoute();

    const actions = useService();

    const articleData = ref({
      title: '',
      content: '',
      switchStatus: false,
      BuyDrugData: {}
    });

    route.query.id &&
      actions.hos.getPreviewArticleInfo({ articleId: route.query.id }).then((res) => {
        try {
          res.content = JSON.parse(res.content)[0].content;
        } catch {
          console.log('cuowu');
        }
        articleData.value.title = res.title;
        articleData.value.content = res.content;
      });

    !route.query.id &&
      messager.init(window.parent, '*', true).then(() => {
        messager.on('getData', ({ title, content, switchStatus, BuyDrugData }) => {
          articleData.value.title = title;
          articleData.value.content = content;
          articleData.value.switchStatus = switchStatus || false;
          articleData.value.BuyDrugData = BuyDrugData || {};
        });

        messager.emit('onLoad', true);
      });

    return { articleData };
  }
};
</script>

<style lang="scss" scoped>
.article-detail-page {
  min-height: 100%;
  background: #fff;
  padding: 30px 34px;
}
</style>